<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      body {
        background-image: url(./imgae/loginbimg.jpg);
        background-color: rgb(220, 224, 224);
        background-repeat: no-repeat;
        background-size: 375px, 875px;
        position: relative;
        height: 875px;
      }
      .herder {
        width: 1140px;
        height: 50px;
        padding: 30px;
        /* background-color: blanchedalmond; */
        position: absolute;
        left: 375px;
      }
      .logo {
        width: 50px;
        height: 50px;
      }

      .herder-a {
        display: flex;
        align-items: center;
        float: left;
      }
      .herder-a img {
        margin-right: 20px;
        border-radius: 20px;
      }
      .herder-b {
        color: darkslategray;
        float: right;
        width: 400px;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-around;
        position: relative;
        margin-right: 30px;
      }
      .herder-b a:hover {
        color: red;
      }

      .san {
        border: 10px solid rgba(47, 79, 79, 0);
        border-top: 10px solid darkslategray;
        position: absolute;
        right: 10px;
        top: 20px;
      }
      .herder-b span {
        display: block;
        width: 100px;
        height: 100px;
        background-color: rgb(215, 207, 207);

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        /* position: absolute; */
        /* top: 60px; */
        /* right: 10px; */
        display: none;
      }
      .herder-b span i {
        display: inline-block;
        font-style: normal;
        width: 100%;
        text-align: center;
      }
      .herder-b span i:hover {
        background-color: rgb(254, 254, 254);
      }
      .zw {
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
      }
      .form {
        width: 360px;
        height: 600px;
        padding: 20px 40px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top: 120px;
        left: 800px;
      }
      .tab {
        width: 100%;
        height: 20px;
        padding: 20px;
        font-size: 18px;
        font-weight: 900;
      }

      .tab .bor {
        margin: 0 10px;
        border-bottom: 5px solid red;
        border-radius: 2px;
      }
      .tab .hc {
        color: darkcyan;
        border: none;
      }
      .log {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      .log input {
        border: none;
        outline: none;
        width: 100%;
        height: 30px;
        padding: 10px;
        background-color: rgb(231, 228, 226);
      }
      .chk {
        width: 100%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      .chk p:nth-child(1) {
        width: 100%;
        height: 30px;
      }
      .chk button {
        width: 100%;
        height: 20px;
        line-height: 0;
        color: #ffffff;
        background-color: red;
        background-image: -webkit-gradient(
          linear,
          left 0,
          right 0,
          from(rgb(4, 94, 170)),
          to(rgb(1, 152, 216))
        );

        list-style-image: -webkit-gradient(
          linear,
          left 0,
          right 0,
          from(rgb(4, 94, 170)),
          to(rgb(1, 152, 216))
        );

        border: none;
        border-radius: 5px;
        font-size: 18px;
        padding: 20px;
      }
      .chk p:nth-child(3) {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        padding-top: 10px;
      }
      .chk p:nth-child(4) {
        height: 20px;
        padding-top: 15px;
        color: cadetblue;
      }
    </style>
  </head>
  <body>
    <div class="herder">
      <div class="herder-a">
        <img src="./imgae/logo.png" alt="" class="logo" />
        <h2>小米账号</h2>
      </div>
      <div class="herder-b">
        <a>用户协议</a>
        <a>隐私政策</a>
        <a> 帮助中心 </a>
        <a>|</a>
        <a class="zw"
          ><b>中文(简体)</b
          ><span class="sp">
            <i>简体中文</i>
            <i>English</i>
          </span>
        </a>
        <a class="san"></a>
      </div>
    </div>
    <div class="form">
      <div class="tab"><a class="hc">登录</a><a class="reg bor">注册</a></div>
      <div class="log">
        <input type="text" placeholder="请输入用户名" />
        <input type="text" placeholder="请输入密码" />
        <input type="text" placeholder="请输入确认密码" />
        <input type="text" placeholder="请输入昵称" />
      </div>
      <div class="chk">
        <p><input type="checkbox" class="ched" /><span>同意协议</span></p>
        <button class="btns">注册</button>
        <p>
          <img src="./imgae/zfb.png" alt="" />
          <img src="./imgae/zfb.png" alt="" />
          <img src="./imgae/zfb.png" alt="" />
          <img src="./imgae/zfb.png" alt="" />
        </p>
        <p>其他登陆方式</p>
        <p>︾</p>
      </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/cookieFn.js"></script>
    <script>
      let san = document.querySelector(".san");
      let sp = document.querySelector(".sp");
      let zw = document.querySelector(".zw");
      zw.onmouseover = function (e) {
        sp.style.display = "block";
        san.style.border = "10px solid rgba(47, 79, 79, 0)";
        san.style.borderBottom = "10px solid darkslategray";
        san.style.top = "10px";
        zw.style.marginRight = "0";
      };
      zw.onmouseleave = function () {
        san.style.border = "10px solid rgba(47, 79, 79, 0)";
        san.style.borderTop = "10px solid darkslategray";
        san.style.top = "20px";
        sp.style.display = "none";
        zw.style.marginRight = "20px";
      };

      // 正文
      /*
                1，点击登录和注册 进行注测与登录切换
                ，2，点击注册
                xian
                2-1判断是否勾选复选框
                2-2 勾选之后发送注册请求，查看服务端返回的数据，

                */
      //  1
      let hc = document.querySelector(".hc");
      let reg = document.querySelector(".reg");
      let ipt = document.querySelector(".log");
      let ched = document.querySelector(".ched");
      let ff = true;
      let aIpt = ipt.children;
      let params = {};
      let API = "http://localhost:8888";
      let btnS = document.querySelector(".btns");
      //注册点击的时候
      reg.onclick = function () {
        ff = true;
        reg.setAttribute("class", "bor");
        hc.setAttribute("class", "");
        btnS.innerText = "注册";
        ipt.innerHTML = `  <input type="text" placeholder="请输入用户名" />
                    <input type="text" placeholder="请输入密码" />
                    <input type="text" placeholder="请输入确认密码" />
                    <input type="text" placeholder="请输入昵称" />`;
      };
      //登录点击
      hc.onclick = foo;
      //登录点击的函数
      function foo() {
        ff = false;

        console.log(params);
        ipt.style.justifyContent = " space-evenly";
        hc.setAttribute("class", "bor");
        reg.setAttribute("class", "");
        btnS.innerText = "登录";

        if (params.username) {
          ipt.innerHTML = `
              <input type="text" placeholder="请输入用户名" value="${params.username}"/>
                    <input type="password" placeholder="请输入密码" value="${params.password}" />
            `;
        } else {
          ipt.innerHTML = `
              <input type="text" placeholder="请输入用户名"/>
                    <input type="password" placeholder="请输入密码" />
            `;
        }
      }

      console.log(aIpt[0]);
      //注册登录点击的时候
      btnS.onclick = async function () {
        axios.defaults.headers.post["Content-Type"] =
          "application/x-www-form-urlencoded";
        if (ched.checked) {
          if (ff) {
            axios
              .post(API + "/users/register", {
                username: aIpt[0].value,
                password: aIpt[1].value,
                rpassword: aIpt[2].value,
                nickname: aIpt[3].value,
              })
              .then(function (response) {
                console.log(response.data);
                let res = response.data;
                if (res.code == 1) {
                  console.log(res);
                  alert(res.message);
                  params.username = aIpt[0].value;
                  params.password = aIpt[1].value;

                  foo();
                  ched.checked = false;
                } else {
                  alert(res.message);
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          }
          if (!ff) {
            axios
              .post(API + "/users/login", {
                username: aIpt[0].value,
                password: aIpt[1].value,
              })
              .then(function (r) {
                console.log(r);
                if (r.data.code == 1) {
                  localStorage.setItem("token", r.data.token);
                  localStorage.setItem("uid", r.data.user.id);
                  localStorage.setItem("username", r.data.user.username);
                  alert(r.data.message);
                  location.href = "./list.html";
                }
              });
          }
        } else {
          alert("亲，请先同意协议");
        }
      };
    </script>
  </body>
</html>
